VisualHMI - 滑动画面控件

什么是滑动画面控件?

image-20231122135130509

滑动画面控件,主画面框选一个矩形窗口,在该区域上左右或上下滑动,显示画面A~B范围的内容,实现手机桌面滑动的效果

适用范围:VisualHMI - HMI&M系列

例程下载链接:VisualHMI - 滑动画面控件(点击下载)

注意

在设计页面上,建议不要把有滑动操作的控件,布局在滑动窗口范围内。以滑块为例,若【滑块控件】的滑动方向和【滑动画面控件】的滑动方向一样,会优先响应控件操作,不执行页面滑动,如下所示

Video_2023-11-23_095615

相关按钮触发逻辑,执行时机选择“松开时”触发,以位状态指示灯-切换开关为例,如下所示:

image-20231123095216033

1.滑动画面控件属性介绍

1.1.功能设置

滑动画面控件属性如下所示:

image-20231122135309687

  1. 滑动范围:设置滑动画面的范围,可设置为固定或者动态;

    • 开始画面:控件滑动的开始画面;

    • 结束画面:控件滑动的结束画面;

    • 滑动方向:可设置为左右或上下滑动;

    • 循环滑动:滑动到结束画面后是否可以继续滑动到开始画面;

    • 滑行时间:触摸松开后,自动滑行的时间,单位毫秒。

  2. 读写地址:当设置为动态滑动范围时,绑定的地址表示当前滑动控件显示的画面ID,地址值+1表示开始画面,地址值+2表示结束画面

2.应用

2.1.固定范围

2.1.1. 工程配置

在画面中添加一个【滑动画面】控件,配置如下所示:

  1. 滑动范围:固定,共3个画面

    • 开始画面:2_固定范围1;

    • 结束画面:4_固定范围3;

    • 滑动方向:左右

  2. 读写地址:LW8000

image-20231123083353729

在画面中添加一个【多状态指示灯】控件,用于左导航点演示,配置如下所示:

  1. 读取地址:LW8000,和【滑动画面】控件配置的读写地址一致
  2. 状态数:3
    • 状态转换表:2;3;4;对应滑动画面2~4

image-20231123083739363

2.1.2.运行预览

运行虚拟屏,滑动画面,导航栏随着变化,且滑动限制开始结束页,如下所示:

Video_2023-11-23_084313~1

2.2.动态范围

2.2.1.工程配置

在画面中添加一个【滑动画面】控件,用于演示动态修改滑动画面的滑动范围,配置如下所示:

  1. 滑动范围:动态

    • 开始画面:5_动态范围1;
    • 结束画面:7_动态范围3;
    • 滑动方向:上下
    • 循环:√
  2. 读写地址:LW8100;(LW8100:当前画面,LW8101:开始画面,LW8102:结束画面)

image-20231123085012713

在画面中添加一个【位状态指示灯】控件,用于修改【滑动画面】控件的滑动范围。当LWF000=0,滑动范围为“动态范围1-1”~“动态范围1-3”;当LWF000=1,滑动范围为“动态范围2-1”~“动态范围2-4”;配置如下所示:

  1. 读取地址:LWF000
  2. 切换开关:√
  3. 开关类型:切换开关
  4. 使用图库:是
  5. 使用文字:是

image-20231123085526497

修改滑动范围:本历程通过LUA脚本修改,也可以通过PLC发送指令修改寄存器的值,LUA程序如下所示:

function on_update(slave,vtype,addr)
    if vtype == VT_LW
    then
        if addr == 0xF000
        then
            local key = get_uint16(VT_LW, 0xF000)
            if key == 0
            then
                set_uint16(VT_LW, 0x8100, 5) --当前页面
                set_uint16(VT_LW, 0x8101, 5) --开始画面
                set_uint16(VT_LW, 0x8102, 7) --结束画面
            elseif key == 1
            then
                set_uint16(VT_LW, 0x8100, 8) --当前页面
                set_uint16(VT_LW, 0x8101, 8) --开始画面
                set_uint16(VT_LW, 0x8102, 11)--结束画面
            end
        end
    end
end

在画面中添加两个【多状态指示灯】控件,一个用来是显示动态范围-1的导航栏,另一个用来显示动态范围-2的导航栏

【多状态指示灯】控件“范围1”的属性配置如下所示:

  1. 读取地址:LW8100,和【滑动画面】控件配置的读写地址一致

  2. 状态数:3

    • 状态转换表:5;6;7;对应滑动画面5~7
  3. 控件权限:√

    • 条件地址:LWF000

    • 比较:==

    • 值:0

image-20231123090343702

【多状态指示灯】控件“范围2”的属性配置如下所示:

  1. 读取地址:LW8100,和【滑动画面】控件配置的读写地址一致

  2. 状态数:4

    • 状态转换表:8;9;10;11;对应滑动画面8~11
  3. 控件权限:√

    • 条件地址:LWF000

    • 比较:==

    • 值:1

image-20231123090758580

2.2.2.运行预览

运行虚拟屏,点击"动态范围-x"按钮,显示不同的内容和滑动范围,且可以循环滑动,如下所示:

Video_2023-11-23_093237

Copyright ©Dacai all right reserved,powered by Gitbook该文件修订时间: 2023-12-07 19:05:21

results matching ""

    No results matching ""